import { Loading } from '@/global';
import styles from '@/pages/MainMenu/common_page.module.scss';
import { ElTable, ElForm } from 'element-plus';
import { createElTableColumns, TableColumnConfig } from '@/util/vnode_create_util/dynamic_table_column_creator';
import { Page } from '@/config/api_config/api_interface';
import { CommonPagination } from '@/config/component_config/custom_config/wind_component/pagination/CommonPagination';
import {
  createFormItemsFromConfig,
  FormConfig,
  BaseFormItemConfigInterface, createDefaultFormFromConfig
} from '@/util/vnode_create_util/dynamic_form_creator/dynamic_form_item_creator';
import { h, VNode } from 'vue';

export interface CommonPaginationConfig{
  page: Page;
  changePageFunction: (page: number) => void
}

/**
 * 创造页面底部的分页
 * @param config 配置对象
 */
export const createCommonPagination: (config: CommonPaginationConfig) => VNode = (config) => {
  return <div class={styles.common_pagination}>
    <CommonPagination total={config.page.total} v-model:currentPage={config.page.pageIndex} v-model:currentPageSize={config.page.pageLimit} onChangePage={config.changePageFunction} />
  </div>;
};
export interface CommonDataTableConfig<T> {
  maxHeight?: number;
  defineColumns: TableColumnConfig<T>[];
  data: T[];
  loading: Loading;
}

/**
 * 创造页面中间的表格
 * @param config 配置对象
 */
export const createCommonDataTable: <T>(config: CommonDataTableConfig<T>) => VNode = (config) => {
  return <div class={styles.common_datatable_area}>
    <ElTable data={config.data} v-loading={config.loading.status} maxHeight={config.maxHeight ?? window.innerHeight - 220}>
      {createElTableColumns(config.defineColumns)}
    </ElTable>
  </div>;
};

/**
 * 创造页面上方的搜索条件
 * @param config 配置对象
 */
export const createCommonSearch: <T>(config: FormConfig<T>) => VNode = (config) => {
  return <div class={styles.common_search}>
    { createDefaultFormFromConfig(config)}
  </div>;
};
